<template>
	<view class="wrap" :style="{ height: this.app_height + 'rpx' }" v-if="show">
		<view class="top"></view>
		<view style="display: flex;flex-direction: column;justify-content: center;height: 80%;">
			<view class="content">
				<view class="title">欢迎创业系统</view>
				<input class="u-border-bottom" v-model="loginInfo.username" placeholder="请输入账号" style="height: 3em;" />
				<input class="u-border-bottom" v-model="loginInfo.email" placeholder="请输入邮箱"
					style="margin-top: 30rpx;height: 3em;" v-if="!isPwdLogin" />
				<input class="u-border-bottom" type="password" v-model="loginInfo.password" placeholder="请输入密码"
					style="margin-top: 30rpx;height: 3em;" />

				<u-button class="loginButton" type="primary" @tap="submit" :disabled="loginInfo.username==''">
					{{isPwdLogin?"登录":"注册"}}
				</u-button>
				<view class="alternative">
					<view class="password" @click="isPwdLogin=!isPwdLogin">{{isPwdLogin?"立即注册":"密码登录"}}</view>
					<view class="issue">遇到问题</view>
				</view>
			</view>
		</view>
		<view class="buttom">
			<view class="loginType">
				<view class="wechat item" @click="otherLogin">
					<view class="icon">
						<u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
					</view>
					微信
				</view>
				<view class="QQ item" @click="otherLogin">
					<view class="icon">
						<u-icon size="70" name="qq-fill" color="rgb(17,183,233)"></u-icon>
					</view>
					QQ
				</view>
			</view>
			<view class="hint">
				登录代表同意
				<text class="link">创业系统用户协议、隐私政策，</text>
				并授权使用您的创业系统账号信息（如昵称、头像、收获地址）以便您统一管理
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: async function() {
			uni.getSystemInfo({
				success: res => {
					this.app_height = res.windowHeight / (res.windowWidth / 750);
				}
			});
			let auth = uni.getStorageSync("authorization");
			if (auth) {
				await this.successLogin();
				return;
			}
			this.show = true;
		},
		data() {
			return {
				app_height: 0,
				isPwdLogin: true,
				show: false,
				loginInfo: {
					username: "",
					password: ""
				}
			}
		},
		methods: {
			async submit() {
				if (this.isPwdLogin) {
					let [err, res] = await this.$to(this.$api.post({
						url: "/base/login",
						data: this.loginInfo
					}));
					if (!err && res.code == 200) {
						this.successLogin();
					} else {
						this.$toast(err ? null : res.msg);
					}
				} else {
					var [err, res] = await this.$to(this.$api.post({
						url: "/base/register",
						data: this.loginInfo
					}));
					if (!err && res.code == 200) {
						this.isPwdLogin = true;
						this.$toast(res.msg);
					} else {
						this.$toast(err ? null : res.msg);
					}
				}

			},
			otherLogin() {
				this.$toast("请使用密码登录");
			},
			async successLogin() {
				var [err, res] = await this.$to(this.$api.get({
					url: "/userinfo/get",
					loading: false
				}));
				//首次登录
				if (res.code != 200) {
					uni.reLaunch({
						url: "../my/update_userinfo",
						success() {
							plus.navigator.closeSplashscreen();
						}
					})
				} else {
					uni.reLaunch({
						url: "../main/main",
						success() {
							plus.navigator.closeSplashscreen();
						}
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 0rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-top: 12rpx;
			}

			.loginButton {
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;
				margin-top: 30rpx;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			height: 20%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.loginType {
				display: flex;
				padding: 50rpx 150rpx 50rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
	}
</style>
